<template>
  <div>
    <div class="overlay">
      <div class="overlay-content scrolling">
        <div class="head">
          <div @click="back" class="return"></div>
        </div>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=' '>
        <van-swipe @change="onChange">
          <van-swipe-item v-for="(item,index) in listImg" :key="item.index">
            <van-image width="100%" height="100%" :src="item.img"/>
          </van-swipe-item>
        </van-swipe>
        <div
          style="position:absolute;right: 0;margin: -30px 5px;background: white;padding: 0px 10px;border-radius: 10px;opacity: 0.5;font-size: 13px;">
          <span style="opacity: 1;color: black;">{{ current+1 }}/{{listImg.length}}</span>
        </div>
        <div style="height: 30px;width: 100%;background: #3fb776;top: -5px;position: relative;">
          <div style="position: absolute;top: 5px;left: 10px;">
            <van-icon name="clock-o" size="20px"/>
            <span style="font-size: 14px;position: relative;top: -5px;" v-if="list.status == 1">{{$t('PropertyDetails.v1')}}</span>
            <span style="font-size: 14px;position: relative;top: -5px;" v-if="list.status == 2">{{$t('PropertyDetails.v2')}}</span>
          </div>
        </div>
        <div style="background: white;color: black;margin-top: -5px;">
          <div style="padding: 10px;">
            <span v-text="list.title">香奈儿女士包包一个，这个包包非常非常非常非常非常非常好</span>
            <div style="font-size: 13px;padding: 10px 0px;">
              <span>{{$t('PropertyDetails.v3')}}:</span>
              <span style="color: rgb(249, 73, 81);" v-text="parseFloat(list.pay).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">100 USDT</span>
            </div>
            <div style="padding: 10px 0px;">
              <van-progress v-if="list.ratio" :percentage="Number(parseFloat(Number(list.ratio * 100)).toFixed(3).slice(0,-1))" color="#22a77b" />
              <van-progress v-if="!list.ratio" :percentage="0" color="#22a77b" />
            </div>
            <div style="padding: 15px 0px;" align="center">
              <van-row justify="center" style="color: #7d7e80;font-size: 13px;">
                <van-col span="8">{{$t('PropertyDetails.v4')}}</van-col>
                <van-col span="8">{{$t('PropertyDetails.v5')}}</van-col>
                <van-col span="8">{{$t('PropertyDetails.v6')}}</van-col>
              </van-row>
              <van-row justify="center" style="color: black;font-size: 13px;padding-top: 10px;">
                <van-col span="8" v-text="parseFloat(list.amountRaised).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">400 USDT</van-col>
                <van-col span="8" v-text="parseFloat(list.amountPlan).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">8000 USDT</van-col>
                <van-col span="8" v-text="list.validTotal + ' ' + $t('PropertyDetails.v7')">20 人</van-col>
              </van-row>
            </div>
          </div>
        </div>
        <div style="background: white;color: black;margin-top: 10px;">
          <div style="padding: 10px;">
            <div style="font-size: 16px;"><b>{{$t('PropertyDetails.v8')}}</b></div>
            <div style="font-size: 13px;padding: 10px 0px;" align="center">
              <van-row>
                <van-col span="24" style="text-align: left;">
                  <span>{{$t('PropertyDetails.v9')}}</span>&nbsp;&nbsp;&nbsp;
                  <span style="color: #7d7e80;">{{$t('PropertyDetails.v10')}}</span>
                </van-col>
              </van-row>
              <van-row style="padding-top: 10px;">
                <van-col span="24" style="text-align: left;">
                  <span>{{$t('PropertyDetails.v11')}}</span>&nbsp;&nbsp;&nbsp;
                  <span style="color: #7d7e80;" v-text="parseFloat(list.pay).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">1000 USDT</span>
                </van-col>
              </van-row>
              <van-row style="padding-top: 10px;">
                <van-col span="24" style="text-align: left;">
                  <span>{{$t('PropertyDetails.v12')}}</span>&nbsp;&nbsp;&nbsp;
                  <span style="color: #7d7e80;" v-text="parseFloat(list.earnings).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') +  'USDT'">1000 EXUU</span>
                </van-col>
              </van-row>
              <van-row style="padding-top: 10px;">
                <van-col span="24" style="text-align: left;">
                  <span>{{$t('PropertyDetails.v13')}}</span>&nbsp;&nbsp;&nbsp;
                  <span style="color: #7d7e80;">{{ list.joinTime | dateFormat }}</span>
                </van-col>
              </van-row>
            </div>
          </div>
        </div>
        <div style="background: white;color: black;margin-top: 10px;">
          <div style="padding: 10px;">
            <div style="font-size: 16px;">
              <b>{{$t('PropertyDetails.v14')}}</b>
              <span style="font-size: 12px;float: right;color: #7d7e80;position: relative;top: 3px;"
                    @click="$router.push({path: 'ParticipationInstructions',query: {projectId: list.projectId}})" v-if="list.joinExplain != null">{{$t('PropertyDetails.v15')}}<van-icon
                name="arrow" style="position: relative;top: 2px;"/></span>
              <span style="font-size: 12px;float: right;color: #7d7e80;position: relative;top: 3px;"
                    @click="$toast($t('PropertyDetails.v16'))" v-if="list.joinExplain == null">{{$t('PropertyDetails.v15')}}<van-icon
                name="arrow" style="position: relative;top: 2px;"/></span>
            </div>
            <div style="padding-top: 10px;font-size: 13px;color: #7d7e80;">
              <div v-if="list.joinExplain != null" v-html="list.joinExplain" class="jsImg"></div>
              <div v-if="list.joinExplain == null" style="text-align: center">
                {{$t('PropertyDetails.v16')}}
              </div>
            </div>
          </div>
        </div>
        <div style="background: white;color: black;margin-top: 10px;">
          <div style="padding: 10px;">
            <div style="font-size: 16px;">
              <b>{{$t('PropertyDetails.v17')}}</b>
              <span style="font-size: 12px;float: right;color: #7d7e80;position: relative;top: 3px;"
                    @click="$router.push({path: 'ProjectProgress',query: {projectId: list.projectId}})" v-if="list.progress != null">{{$t('PropertyDetails.v15')}}<van-icon
                name="arrow" style="position: relative;top: 2px;"/></span>
              <span style="font-size: 12px;float: right;color: #7d7e80;position: relative;top: 3px;"
                    @click="$toast($t('PropertyDetails.v18'))" v-if="list.progress == null">{{$t('PropertyDetails.v15')}}<van-icon
                name="arrow" style="position: relative;top: 2px;"/></span>
            </div>
          </div>
          <div style="padding: 10px;font-size: 13px;color: #7d7e80;">
            <div v-if="list.progress != null" v-html="list.progress.content" class="jsImg"></div>
            <div v-if="list.progress == null" style="text-align: center">
              {{$t('PropertyDetails.v18')}}
            </div>
          </div>
        </div>
        <div style="background: white;color: black;margin-top: 10px;">
          <van-tabs v-model="index" swipeable title-active-color="#3ca76d" title-inactive-color="black">
            <van-tab :title="$t('PropertyDetails.v19')">
              <div style="padding: 10px 10px;font-size: 12px;color: #7d7e80;letter-spacing:1px;line-height: 20px;padding-bottom: 50px;">
                <div v-if="list.details != ''" v-html="list.details" class="jsImg">

                </div>
                <div v-if="list.details == ''" style="text-align: center;">
                  {{$t('PropertyDetails.v20')}}
                </div>
              </div>
            </van-tab>
            <van-tab :title="$t('PropertyDetails.v21')">
              <div style="padding: 0px 30px;padding-bottom: 50px;">
                <div class="fh">
                  <div v-for="(item,index) in list.shares" :key="item.index" v-if="list.shares != ''">
                    <van-row style="font-size: 13px;color: #7d7e80;padding-top: 15px;">
                      <van-col span="12" style="text-align: left;padding-left: 5px;">{{$t('PropertyDetails.v22')}}</van-col>
                      <van-col span="12" style="text-align: right;padding-right: 5px;">{{$t('PropertyDetails.v23')}}</van-col>
                    </van-row>
                    <van-row style="font-size: 13px;padding-top: 10px;">
                      <van-col span="12" style="text-align: left;padding-left: 5px;font-size: 12px;">
                        {{ item.createTime | dateFormat }}
                      </van-col>
                      <van-col span="12" style="text-align: right;padding-right: 5px;font-size: 12px;" v-text="parseFloat(item.num).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">1000000.0000 USDT
                      </van-col>
                    </van-row>
                  </div>
                  <div v-if="list.shares == ''" style="font-size: 13px;color: #7d7e80;padding-top: 15px;text-align: center;">
                    {{$t('PropertyDetails.v20')}}
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab :title="$t('PropertyDetails.v36')">
              <div style="padding: 0px 30px;padding-bottom: 50px;">
                <div class="fh">
                  <div v-for="(item,index) in list.billings" :key="item.index" v-if="list.billings != ''">
                    <van-row style="font-size: 13px;color: #7d7e80;padding-top: 15px;">
                      <van-col span="12" style="text-align: left;padding-left: 5px;">{{$t('PropertyDetails.v24')}}</van-col>
                      <van-col span="12" style="text-align: right;padding-right: 5px;">{{$t('PropertyDetails.v25')}}</van-col>
                    </van-row>
                    <van-row style="font-size: 13px;padding-top: 10px;">
                      <van-col span="12" style="text-align: left;padding-left: 5px;font-size: 12px;">
                        {{ item.createTime | dateFormat }}
                      </van-col>
                      <van-col span="12" style="text-align: right;padding-right: 5px;font-size: 12px;" v-text="parseFloat(item.num).toFixed(5).slice(0,-1) + ' ' + $t('PropertyCrowdfunding.v12') + 'USDT'">1000000.0000 USDT
                      </van-col>
                    </van-row>
                  </div>
                  <div v-if="list.billings == ''" style="font-size: 13px;color: #7d7e80;padding-top: 15px;text-align: center;">
                    {{$t('PropertyDetails.v20')}}
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
        </van-pull-refresh>
        <van-button type="primary" @click="sure" style="position: fixed;bottom: 0;z-index:2019;" v-if="list.ratio != 1 && list.currentDate >= list.joinTime && list.status == 1">{{$t('PropertyDetails.v26')}}</van-button>
        <van-button type="primary" style="position: fixed;bottom: 0;z-index:2019;background-color: rgb(153,153,153);border-color:rgb(153,153,153);" v-if="list.ratio == 1 || list.currentDate < list.joinTime || list.status == 2">{{$t('PropertyDetails.v26')}}</van-button>
      </div>
    </div>
    <van-popup v-model="show" class="show" position="bottom" @close="close">
      <div style="padding: 20px;">
        {{$t('PropertyDetails.v27')}}
        <div style="padding-top: 10px;font-size: 13px;color: #7d7e80;">
          {{$t('PropertyDetails.v28')}}{{parseFloat(list.pay).toFixed(5).slice(0,-1)}} {{$t('PropertyCrowdfunding.v12')}}USDT,{{$t('PropertyDetails.v29')}}
          <van-icon name="cross" size="20px" style="position: relative;top: -30px;float: right;" @click="close"/>
        </div>
      </div>
      <div style="padding: 10px 20px;" align="center">
        <van-row style="font-size: 14px;">
          <van-col span="8" style="text-align: left;">{{$t('PropertyDetails.v30')}} EXUU</van-col>
          <van-col span="8">{{$t('PropertyDetails.v31')}}</van-col>
          <van-col span="8" style="text-align: right;">{{$t('PropertyDetails.v32')}}</van-col>
        </van-row>
        <van-row style="font-size: 13px;color: #7d7e80;padding-top: 15px;padding-bottom: 15px;">
          <van-col span="8" style="text-align: left;">{{parseFloat(list2.payExuu).toFixed(5).slice(0,-1)}} EXUU</van-col>
          <van-col span="8">{{parseFloat(Number(list2.ratio * 100)).toFixed(5).slice(0,-1) + '%'}}</van-col>
          <van-col span="8" style="text-align: right;">{{parseFloat(list2.earnings).toFixed(5).slice(0,-1)}} {{$t('PropertyCrowdfunding.v12')}}USDT</van-col>
        </van-row>
      </div>
      <div style="border-top: 1px solid #ebedf0;padding: 20px;" align="center">
        <div align="center" style="padding: 20px 0px;">
          <van-stepper v-model.trim="value" async-change @change="onChange2" integer />
        </div>
        <div style="font-size: 13px;">
          <span>{{$t('PropertyDetails.v33')}} {{list2.balance }} EXUU,</span>
          <span style="color: #1989FA;" @click="giveMoney">{{$t('PropertyDetails.v34')}}</span>
        </div>
      </div>
      <div style="padding: 15px 20px;">
        <van-button slot="button" size="normal" type="info" @click="sureOk" :loading="load">{{$t('PropertyDetails.v35')}}
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
    import {Dialog} from 'vant';
    import { dateFormat } from 'vux';
    import {crowdfunding} from './../../utils/api';
    export default {
        name: "PropertyDetails",
        data() {
            return {
                list: {
                    'progress': '',
                    'billings': [],
                    'shares': []
                },
                list2: '',
                listImg: [],
                current: 0,
                active: 1,
                index: 0,
                show: false,
                value: '',
                load: false,
                isLoading: false
            }
        },
        mounted() {
          this.getList();
        },
        methods: {
            getList() {
                crowdfunding.getProjectDetails({
                    projectId: this.$route.query.projectId
                }).then(res => {
                    if(res.code == 200) {
                        this.list = res.data;
                        const baseList = [];
                        for (let i = 0; i < res.data.pictureDetails.split(";").length; i++) {
                            baseList.push({
                                img: res.data.pictureDetails.split(";")[i]
                            })
                        }
                        this.listImg = baseList;
                    }
                })
            },
            onChange(index) {
                this.current = index;
            },
            onChange2(value) { // 步进器的操作
                crowdfunding.getJoinData({
                    projectId: this.$route.query.projectId,
                    total: value
                }).then(res => {
                    if(res.code == 200) {
                        this.list2 = res.data;
                    }
                })
            },
            sure() { // 打开立即参与的面板
                this.value = 1;
                this.show = true;
                crowdfunding.getJoinData({
                    projectId: this.$route.query.projectId,
                    total: this.value
                }).then(res => {
                    if(res.code == 200) {
                        this.list2 = res.data;
                    }
                })
            },
            giveMoney() { // 立即充值
                this.axios.get(process.env.API_HOST + 'user/getIsTradePass').then(res => { // 判断是还是设置支付密码
                    if (res.data.data == 1) { // 当true为已设置交易密码
                        this.$router.push({
                            path: '/ToChange'
                        })
                    } else {
                        let _this = this
                        Dialog.confirm({
                            message: this.$t('Details.v50') + '！',
                            confirmButtonText: this.$t('Details.v51'),
                            cancelButtonText: this.$t('Details.v52'),
                            cancelButtonColor: 'white'
                        }).then(() => {
                            _this.$router.push({
                                path: '/UpdatePayPwd',
                                query: {
                                    type: 0,
                                    roid: 'PropertyDetails'
                                }
                            })
                        }).catch(() => { //稍后设置

                        });
                    }
                })
            },
            sureOk() { // 确定参与
                crowdfunding.getJoin({
                    projectId: this.$route.query.projectId,
                    total: this.value
                }).then(res => {
                    if(res.code == 200) {
                        this.getList();
                    }
                    this.$toast(res.msg);
                })
                this.show = false;
                this.load = false;
            },
            close() { // 关闭按钮
                this.value = '';
                this.show = false;
                this.load = false;
            },
            back() {
                if (this.$route.query.roid) {
                    this.$router.push({
                        path: this.$route.query.roid
                    })
                } else {
                    this.$router.push({
                        path: '/'
                    })
                }
            },
            onRefresh() {
                this.getList();
                setTimeout(() => {
                    this.$toast({
                        duration: 800,
                        message: this.$t('Prize.v23')
                    });
                    this.isLoading = false;
                }, 500);
            }
        },
        filters: {
            dateFormat
        }
    }
</script>

<style lang="less" scoped>
  .overlay {
    background: rgb(245, 245, 245);
  }

  .head {
    background-color: transparent;
    width: 15%;
    position: absolute !important;
  }

  .head .return:after {
    border-color: black;
  }

  /deep/ .van-swipe__indicators {
    display: none;
  }

  /deep/ .van-tabs__line {
    background-color: rgb(60, 167, 109);
  }

  /deep/ .show .van-stepper__input {
    background: transparent;
    border: 1px solid rgb(244, 244, 244);
    color: black;
    border-radius: 10px;
    width: 80px;
    height: 80px;
    margin: 0px 30px;
  }

  /deep/ .show .van-stepper__minus {
    border-radius: 50%;
  }

  /deep/ .show .van-stepper__minus--disabled,
  .van-stepper__minus--disabled:active,
  .van-stepper__plus--disabled,
  .van-stepper__plus--disabled:active {
    background: rgb(244, 244, 244);
  }

  /deep/ .show .van-stepper__plus {
    background: rgb(254, 32, 32);
    border-radius: 50%;
    width: 60px;
    height: 60px
  }

  /deep/ .show .van-stepper__minus,
  .van-stepper__plus {
    width: 60px;
    height: 60px;
  }

  /deep/ .show .van-stepper__minus::before,
  .van-stepper__plus::before {
    width: 18px;
    height: 2px;
  }

  /deep/ .show .van-stepper__plus::after {
    width: 2px;
    height: 18px;
    background-color: white;
  }

  /deep/ .show .van-stepper__plus::before {
    width: 18px;
    height: 2px;
    background-color: white;
  }

  /deep/ .show .van-button--info {
    border: none;
  }

  /deep/ .show .van-stepper__plus {
    background: rgb(60, 167, 109);
  }

  .van-progress {
    width: 95%;
  }

  /deep/ .jsImg img {
    width: 100%;
    height: 100%;
  }
</style>
